<style>
  #dialog {
    --cr-dialog-width: min(calc(100% - 80px), 1400px);
  }
</style>
<cr-dialog id="dialog" show-close-button>
  <div slot="title">Keyboard tester</div>
  <div slot="body">
    <p>Physical layout: [[keyboard.physicalLayout]]</p>
    <p>Mechanical layout: [[keyboard.mechanicalLayout]]</p>
    <p>Number pad presence: [[keyboard.numberPadPresent]]</p>
    <template is="dom-if" if="[[keyboard.hasAssistantKey]]">
      <p>Has Assistant key</p>
    </template>
    <template is="dom-if" if="[[layoutIsKnown_]]">
      <keyboard-diagram
          mechanical-layout="[[diagramMechanicalLayout_]]"
          physical-layout="[[diagramPhysicalLayout_]]"
          show-assistant-key="[[keyboard.hasAssistantKey]]"
          show-number-pad="[[showNumberPad_]]"
          top-row-keys="[[topRowKeys_]]">
      </keyboard-diagram>
    </template>
  </div>
</cr-dialog>
